<template>
	<div>
		<sh-card title="基础用法" class="mb-3">
			<template v-for="fit in fitList" :key="fit">
				<div style="display: inline-block; vertical-align: top; text-align: center; margin-right: 20px">
					<sh-image v-bind="imgConfig" :fit="fit"></sh-image>
					<div>{{ fit }}</div>
				</div>
			</template>
		</sh-card>
		<sh-card title="加载失败" class="mb-3">
			<div style="display: inline-block; vertical-align: top; text-align: center; margin-right: 20px">
				<sh-image v-bind="imgConfig" src=""></sh-image>
				<div>默认</div>
			</div>
			<div style="display: inline-block; vertical-align: top; text-align: center; margin-right: 20px">
				<sh-image v-bind="imgConfig" src="">
					<template #error>加载失败</template>
				</sh-image>
				<div>自定义</div>
			</div>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseImage',
	data() {
		return {
			imgConfig: {
				width: '100px',
				height: '100px',
				src: '/files/test.png'
			},
			fitList: ['fill', 'contain', 'cover', 'none', 'scale-down']
		}
	}
}
</script>

<style scoped lang="scss"></style>
